<template>
  <hry-header title="当日募资金额" :showBackBtn="true" backRouterName="home">
    <md-icon
      name="filter"
      slot="action"
      @click="showFullScreen = true"
    ></md-icon>
    <div slot="content" class="main">
      <md-scroll-view
        ref="scrollView"
        :scrolling-x="false"
        :auto-reflow="true"
        @endReached="$_onEndReached"
        @refreshing="$_onRefresh"
      >
        <md-scroll-view-refresh
          slot="refresh"
          slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
          :scroll-top="scrollTop"
          :is-refreshing="isRefreshing"
          roller-color="#FD7400"
          :is-refresh-active="isRefreshActive"
        ></md-scroll-view-refresh>
        <div class="time">
          <p class="timeFont">{{ startTime }}</p>
          <p>--</p>
          <p class="timeFont">{{ endTime }}</p>
        </div>
        <md-result-page
          v-show="isShow"
          style="margin-top: 30px"
          text="暂无数据"
        ></md-result-page>
        <p class="money" v-show="showTime">
          当前查询日期募资总金额为： <span>{{ money }}</span> 元
        </p>
        <raise-a-day
          v-for="(item, index) in data"
          :key="index"
          :cardInfo="item"
        ></raise-a-day>
        <md-scroll-view-more slot="more" :is-finished="isFinished">
        </md-scroll-view-more>
      </md-scroll-view>
      <md-landscape v-model="showFullScreen" full-screen>
        <h1>筛选</h1>
        <md-field>
          <md-field-item
            name="name"
            title="开始时间"
            arrow="arrow-right"
            align="right"
            :content="startTime"
            @click.native="isDatePickerShow = true"
          >
          </md-field-item>
          <md-field-item
            name="name"
            title="结束时间"
            arrow="arrow-right"
            align="right"
            :content="endTime"
            @click.native="isEndShow = true"
          >
          </md-field-item>
        </md-field>
        <md-button
          type="primary"
          style="width: 80%;margin: 20px auto;"
          @click="inquireBtn"
          >搜索</md-button
        >
        <md-button
          type="primary"
          style="width: 80%;margin: 20px auto;"
          @click="resetBtn"
          >重置</md-button
        >
      </md-landscape>
      <md-date-picker
        ref="datePicker"
        v-model="isDatePickerShow"
        type="custom"
        title="开始时间"
        :text-render="textRender"
        :custom-types="['yyyy', 'MM', 'dd']"
        :default-date="currentDate"
        :max-date="maxDete()"
        :min-date="minDate()"
        @confirm="onDatePickerConfirm"
      ></md-date-picker>
      <md-date-picker
        ref="datePickerEnd"
        v-model="isEndShow"
        type="custom"
        title="结束时间"
        :text-render="textRender"
        :max-date="maxDeteEnd()"
        :min-date="minDateEnd()"
        :custom-types="['yyyy', 'MM', 'dd']"
        :default-date="currentDate"
        @confirm="onDatePickerConfirmEnd"
      ></md-date-picker>
    </div>
  </hry-header>
</template>

<script>
import hryHeader from "@/components/contentWrapper/index";
import {
  DatePicker,
  Field,
  FieldItem,
  Icon,
  Landscape,
  Button,
  ScrollView,
  ScrollViewRefresh,
  ScrollViewMore,
  ResultPage
} from "mand-mobile";

export default {
  name: "index",
  components: {
    [Button.name]: Button,
    [DatePicker.name]: DatePicker,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Landscape.name]: Landscape,
    [Icon.name]: Icon,
    [ScrollView.name]: ScrollView,
    [ScrollViewMore.name]: ScrollViewMore,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ResultPage.name]: ResultPage,
    hryHeader: hryHeader,
    raiseADay: () => import("@/components/raise-a-day/index")
  },
  data() {
    return {
      showFullScreen: false,
      currentDate: new Date(),
      isDatePickerShow: false,
      isEndShow: false,
      textRender: "",
      curpage: 1,
      data: [],
      isFinished: false,
      totalPage: 1,
      isShow: false,
      showTime: true,
      money: "",
      startTime: "", //查询开始时间
      endTime: "", //查询结束时间
      startConfirm: false,
      endConfirm: false
    };
  },
  methods: {
    onDatePickerConfirm() {
      this.startTime = this.$refs.datePicker.getFormatDate("yyyy-MM-dd");
      this.startConfirm = true;
    },
    onDatePickerConfirmEnd() {
      this.endTime = this.$refs.datePickerEnd.getFormatDate("yyyy-MM-dd");
      this.endConfirm = true;
    },
    maxDete() {
      if (this.endConfirm) {
        return new Date(this.endTime);
      } else {
        return new Date(this.dete());
      }
    },
    minDate() {
      return new Date("2010-01-01");
    },
    maxDeteEnd() {
      return new Date(this.dete());
    },
    minDateEnd() {
      return new Date(this.startTime);
    },
    $_onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.curpage++;
      this.getInfo();
    },
    $_onRefresh() {
      this.$nextTick(() => {
        this.curpage = 1;
        this.isFinished = false;
        this.getInfo(true);
      });
    },
    getInfo(refresh) {
      this.$ajax
        .post(this.$api.getTodayOrder, {
          curpage: this.curpage,
          time_begin: this.startTime,
          time_end: this.endTime
        })
        .then(res => {
          if (refresh) {
            this.data = res.data.data.list;
            this.$refs.scrollView.finishRefresh();
            this.showTime = true;
            this.isShow = false;
          } else {
            this.data.push.apply(this.data, res.data.data.list);
            this.showTime = true;
            this.isShow = false;
          }
          this.totalPage = res.data.data.total_page;
          if (this.curpage === this.totalPage) {
            this.isFinished = true;
          }
          if (this.data.length === 0) {
            this.isShow = true;
            this.showTime = false;
          }
          this.money = res.data.data.total_money;
          this.$refs.scrollView.finishLoadMore();
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    dete() {
      let date = new Date();
      let seperator1 = "-";
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    inquireBtn() {
      this.curpage = 1;
      this.getInfo(true);
      this.showFullScreen = false;
    },
    resetBtn() {
      this.endTime = this.dete();
      this.startTime = this.dete();
      this.startConfirm = false;
      this.endConfirm = false;
    }
  },
  mounted() {
    this.$refs.scrollView.triggerRefresh();
  },
  created() {
    this.endTime = this.dete();
    this.startTime = this.dete();
  }
};
</script>

<style scoped lang="stylus">
.main{
  width 100%;
  height 100%;
  overflow hidden
}
h1{
  font-size 34px
  line-height 60px
  text-align center
}
.time{
  padding 0 30px;
  margin-top 30px;
  display flex;
  justify-content center;
}
.time>p:nth-of-type(2){
  margin 0 15px;
}
.timeFont{
  color #fd7400
}
.money{
  text-align center;
  margin-top 30px;
}
.money>span{
  color #fd7400
}
</style>
